<template>
  <div class="order">
    <a-card title="资源管理">
      <a-form v-if="formHeaderVisible" ref="formHeaderRef" class="formHeader">
        <a-row justify="start" :gutter="24">
          <a-col class="formHeader-criteria">
            <a-row :gutter="16">
              <a-col span="8">
                <a-form-item label="设备编号" label-col-flex="80px">
                  <a-input v-model="checkFrom.deviceid" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="设备型号" label-col-flex="80px">
                  <a-input v-model="checkFrom.devicemodel" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="设备名称" label-col-flex="80px">
                  <a-input v-model="checkFrom.devicename" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="工厂" label-col-flex="80px">
                  <a-select v-model="checkFrom.factoryId" placeholder="请选择">
                    <a-option v-for="(item, index) in factoryList" :key="index" :value="item.value">{{ item.label }}</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="制造商" label-col-flex="80px">
                  <a-input v-model="checkFrom.manufacturer" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="资源组ID" label-col-flex="80px">
                  <a-input v-model="checkFrom.resourceGroupId" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col class="formHeader-btn">
            <a-space direction="vertical" :size="20">
              <a-button type="primary" @click="getTable">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <formButtonGroup
        ref="formButtonGroupRef"
        v-model:columns="columns"
        v-model:size="size"
        :config="config"
        :search-bar="searchBar"
        @refresh="init"
        @change-search-bar="changeSearchBar"
      >
        <div class="formHeader-criteria-postizz"></div>
      </formButtonGroup>
      <div :style="{ height: tableHeight }">
        <vxe-table
          ref="tableRef"
          :data="tableList"
          size="mini"
          show-footer
          :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
          :column-config="{ isCurrent: true, resizable: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          :menu-config="menuConfig"
          stripe
          border
          height="100%"
          @menu-click="contextMenuBodyClickEvent"
        >
          <vxe-column title="设备编号" align="center" width="120">
            <template #default="{ row }"> {{ row.deviceid }}</template>
          </vxe-column>
          <vxe-column title="设备型号" align="center" width="120">
            <template #default="{ row }"> {{ row.devicemodel }}</template>
          </vxe-column>
          <vxe-column title="设备名称" align="center" width="120">
            <template #default="{ row }"> {{ row.devicename }}</template>
          </vxe-column>
          <vxe-column title="出厂日期" align="center" width="120">
            <template #default="{ row }"> {{ row.exfactorydate }}</template>
          </vxe-column>
          <vxe-column title="工厂名称" align="center" width="120">
            <template #default="{ row }"> {{ row.factoryname }}</template>
          </vxe-column>
          <vxe-column title="工厂编号" align="center" width="100">
            <template #default="{ row }"> {{ row.factoryno }}</template>
          </vxe-column>
          <vxe-column title="制造商" align="center" width="100">
            <template #default="{ row }"> {{ row.manufacturer }}</template>
          </vxe-column>
          <vxe-column title="备注" align="center" width="150">
            <template #default="{ row }"> {{ row.remark }}</template>
          </vxe-column>
          <vxe-column title="资源组编号" align="center" width="100">
            <template #default="{ row }"> {{ row.resourceGroupNO }}</template>
          </vxe-column>
          <vxe-column title="资源组名称" align="center" width="100">
            <template #default="{ row }"> {{ row.resourceGroupName }}</template>
          </vxe-column>
          <vxe-column title="出厂编号" align="center" width="100">
            <template #default="{ row }"> {{ row.sn }}</template>
          </vxe-column>
          <vxe-column title="规格" align="center" width="100">
            <template #default="{ row }"> {{ row.specification }}</template>
          </vxe-column>
          <vxe-column title="使用部门" align="center" width="100">
            <template #default="{ row }"> {{ row.usedepartment }}</template>
          </vxe-column>
          <vxe-column title="有效年限" align="center" width="100">
            <template #default="{ row }"> {{ row.validityperiod }}</template>
          </vxe-column>
          <vxe-column title="操作" align="center" width="150" fixed="right">
            <template #default="{ row }">
              <a-space>
                <a-button type="primary" size="mini" @click="viewDetails(row)">
                  <template #default>编辑</template>
                </a-button>
                <a-button type="primary" status="danger" size="mini" @click="viewDetails(row)">
                  <template #default>删除</template>
                </a-button>
              </a-space>
            </template>
          </vxe-column>
        </vxe-table>
      </div>

      <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
        @page-change="handlePageChange"
      >
      </vxe-pager>
    </a-card>
    <a-modal v-model:visible="visible" width="1400px" @ok="visible = false" @cancel="visible = false">
      <template #title> 详情查看 </template>
      <div>
        <a-descriptions v-if="visible" :data="desData" bordered />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './resourceManagement';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import { EFTimeFormatConversion } from '@/utils/baseMethods';
import { multiplication } from '@/utils/calculationFormula';

export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup },
  setup() {
    const { base, menuConfig, handlePageChange, contextMenuBodyClickEvent, viewDetails, getTable } = importConfig();

    return {
      ...toRefs(base),
      menuConfig,
      handlePageChange,
      contextMenuBodyClickEvent,
      viewDetails,
      getTable,
      EFTimeFormatConversion,
      multiplication,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-table {
    font-weight: 500;
  }
}
.formHeader {
  &-buttom {
    padding: 10px 0px;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
  }
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
</style>
